<template>
	<div class="user-profile">
		<!-- 导航栏 -->
		<van-nav-bar
		  title="个人信息"
		  left-arrow
			@click-left="$router.back()"
		/>
		<!-- 导航栏 -->
		<input type="file" hidden accept="image/*" ref="file" @change="onFileChange"/>
		<van-cell title="头像" is-link center @click="$refs.file.click()">
			<van-image width="35" height="35" fit="cover" round :src="user.photo" />
		</van-cell>
		<van-cell title="昵称" is-link :value="user.name" @click="isEbitName = true"></van-cell>
		<van-cell title="性别" is-link :value="user.gender === 0 ? '男' : '女'" @click="isEbitGenderShow = true"></van-cell>
		<van-cell title="生日" is-link :value="user.birthday" @click="isEditBirthdayShow = true" ></van-cell>
		
		<!-- 修改昵称 -->
		<van-popup v-model="isEbitName" position="bottom" :style="{ height:'100%' }">
			<update-name @close="isEbitName = false" :name="user.name" @update-name="user.name = $event" v-if="isEbitName" />
		</van-popup>
		<!-- 修改昵称 -->
		
		<!-- 修改性别 -->
		<van-popup v-model="isEbitGenderShow" position="bottom">
			<update-gender @close="isEbitGenderShow = false" v-model="user.gender" />
		</van-popup>
		<!-- 修改性别 -->
		
		<!-- 修改生日 -->
		<van-popup v-model="isEditBirthdayShow" position="bottom">
			<update-birthday v-model="user.birthday" @close="isEditBirthdayShow = false" />
		</van-popup>
		<!-- 修改生日 -->
		
		<!-- 修改头像 -->
		<van-popup v-model="isEditPhotoShow" position="bottom" style="height: 100%" class="photo-popup">
			<update-photo :file="previewImage" @close="isEditPhotoShow = false" @update-photo = "user.photo = $event" v-if="isEditPhotoShow" />
		</van-popup>
		<!-- 修改头像 -->
		
	</div>
</template>

<script>
	import { getUserProfile } from '../../utils/user.js'
	import UpdateName from './components/updateName.vue'
	import updateGender from './components/update_gender.vue'
	import updateBirthday from './components/update-birthday.vue'
	import updatePhoto from './components/update-photo.vue'
	
	export default {
		name:'UserProfile',
		components:{
			UpdateName,
			updateGender,
			updateBirthday,
			updatePhoto
		},
		data(){
			return {
				user: {},
				isEbitName: false,
				isEbitGenderShow: false,
				isEditBirthdayShow: false,
				isEditPhotoShow:false,
				previewImage:null
			}
		},
		created() {
			this.loadUserProfile()
		},
		methods:{
			async loadUserProfile() {
				const { data } = await getUserProfile()
				this.user = data.data
			},
			onFileChange() {
				this.isEditPhotoShow = true
				
				const file = this.$refs.file.files[0]
				this.previewImage = file
				
				this.$refs.file.value = ''
			}
		}
	}
</script>

<style scoped="scoped">
	.van-popup {
		background-color: #000;
	}
	.photo-popup {
		background-color: #000;
	}
</style>
